<template>
  <div class="container">
    <van-nav-bar>
      <template #left>
        <div style="display: flex; align-items: center" @click="$router.push('/')">
          <div style="width: 40px; height: 40px">
            <img class="auto-img" src="../../assets/images/home_active.png" alt/>
          </div>
          <div style="font-weight: bold; color: #555">
            <span>Luckin Coffee</span>
          </div>
        </div>
      </template>
      <template #right>
        <div style="color: #0c34ba; font-weight: 550" @click="$router.push('/')">
          <span>先逛一逛</span>
        </div>
      </template>
    </van-nav-bar>
    <!-- 登录界面 -->
    <div class="enterLogin" v-if="isLogin===true">
      <!--  主内容区域  -->
      <div class="login">
        <div class="accounts">
          <div>
            <h2>欢迎回来！</h2>
          </div>
          <div>
            <span>Please login to your accounts</span>
          </div>
        </div>
      </div>
      <!--   输入框   -->
      <div class="form-box">
        <van-field v-model="userLoginInfo.phone" type="tel" label="手机号" placeholder="请输入手机号"/>
        <van-field
            v-model="userLoginInfo.password"
            @click-right-icon="isPassword = !isPassword"
            :type="isPassword === true ? 'text' : 'password'"
            :right-icon="isPassword === true ? 'eye-o' : 'closed-eye'"
            label="密码"
            placeholder="密码必须为字母开头"
        />
        <div class="forget">
          <span @click="isLogin=false">忘记密码？</span>
        </div>
      </div>
      <!--  按钮组  -->
      <div class="btn">
        <div class="btno">
          <van-button round color="#0c34ba" size="large" @click="postLogin">登录</van-button>
        </div>
        <div class="btno" @click="isOpen = true">
          <van-button round color="#0c34ba" plain size="large">注册</van-button>
        </div>
      </div>
    </div>

    <!-- 找回密码界面 -->
    <div class="findPassword" v-else>
      <div class="login">
        <div class="accounts">
          <div>
            <h2>找回密码！</h2>
          </div>
          <div>
            <span>Find password</span>
          </div>
        </div>
      </div>
      <!--   输入框   -->
      <div class="form-box">
        <van-field v-model="registerInfo.phone" type="tel" label="手机号" placeholder="手机号"/>
        <van-field v-model="registerInfo.password" type="password" center label="密码" placeholder="密码必须为字母开头">
        </van-field>
        <div class="forget">
          <span @click="isLogin=true">已有账号，立即登录</span>
        </div>
      </div>
      <!--  按钮组  -->
      <div class="btn">
        <div class="btno">
          <van-button round color="#0c34ba" size="large" @click="retrievePassword">提交</van-button>
        </div>
        <div class="btno">
          <van-button round size="large" @click="isLogin=true">返回</van-button>
        </div>
      </div>
    </div>

    <!--  注册弹出层  -->
    <van-popup v-model="isOpen" closeable position="bottom" :style="{ height: '50%' }">
      <div class="register">
        <div style="color: #646566; margin-left: 18px">
          <h2>注册</h2>
        </div>
        <div class="form-box">
          <van-field v-model="registerInfo.phone" type="tel" label="手机号" placeholder="请输入手机号"/>
          <van-field
              v-model="registerInfo.password"
              @click-right-icon="isRegisterPassword = !isRegisterPassword"
              :type="isRegisterPassword === true ? 'text' : 'password'"
              :right-icon="isRegisterPassword === true ? 'eye-o' : 'closed-eye'"
              label="密码"
              placeholder="密码必须为字母开头"
          />
          <van-field v-model="registerInfo.name" type="text" label="昵称" placeholder="昵称"/>
        </div>
        <div class="btn">
          <van-button round color="#0c34ba" size="large" @click="postRegister">注册</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {postRegister, postLogin, retrievePassword} from "@/api/my";

export default {
  name: "login",
  data() {
    return {
      userLoginInfo: {  //登录
        phone: "",
        password: ""
      },
      isPassword: false, //控制密码的显示
      isOpen: false, //底部弹出层
      registerInfo: {  //注册
        phone: "",
        password: "",
        name: ""
      },
      isRegisterPassword: false,
      isLogin: true, //切换登录与找回密码,
      retrieveInfo: {  //找回密码
        phone: "",
        password: ""
      }
    };
  },
  methods: {
    // 注册接口
    postRegister() {
      let self = this;
      let data = {
        appkey: self.appkey,
        nickName: self.registerInfo.name,
        password: self.registerInfo.password,
        phone: self.registerInfo.phone
      };
      postRegister(data)
          .then(res => {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000
            });
          })
          .catch(err => {
            console.log(err);
          });
    },
    // 登录接口
    postLogin() {
      let self = this;
      let data = {
        appkey: self.appkey,
        password: self.userLoginInfo.password,
        phone: self.userLoginInfo.phone
      };
      postLogin(data)
          .then(res => {
            if (res.data.code === 200) {
              this.$cookies.set("tokenString", res.data.token, "1d");
              this.$router.push("/");
            }
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000
            });
          })
          .catch(err => {
            console.log(err);
          });
    },
    // 手机号找回密码
    retrievePassword() {
      let self = this;
      let data = {
        appkey: self.appkey,
        phone: self.registerInfo.phone,
        password: self.registerInfo.password
      };
      retrievePassword(data).then(res => {
        if (res.data.code === "L001") {
          self.$toast.success({message: res.data.msg, duration: 3000});
          self.isLogin = true;
        } else {
          self.$toast.fail({message: res.data.msg, duration: 3000});
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.container {
  background: #ffffff;

  .enterLogin {
    .login {
      padding: 20px 15px;

      .accounts {
        color: #646566;
        margin: 40px 0;
      }
    }

    .form-box {
      padding: 20px 15px;

      .forget {
        text-align: right;
        margin-top: 10px;
        font-size: 14px;
        color: #646566;
      }
    }

    .btn {
      margin: 0 20px;

      .btno {
        margin-top: 40px;
      }
    }
  }

  .findPassword {
    .login {
      padding: 20px 15px;

      .accounts {
        color: #646566;
        margin: 40px 0;
      }
    }

    .form-box {
      padding: 20px 15px;

      .forget {
        text-align: right;
        margin-top: 10px;
        font-size: 14px;
        color: #646566;
      }
    }

    .btn {
      margin: 0 20px;

      .btno {
        margin-top: 40px;
      }
    }
  }
}
</style>
